<template>
	<div class="boxSty pl-18 pr-18 pt-40 pb-28">
		<div class="between items-start">
			
			<div class="flex route-item flex">
				<flag class="mr-6" :country="get(allInfo, 'departure.area_info.country')" />
				<div style="text-align: center;">{{ get(allInfo, "departure.area_info.name") || '' }}</div>
			</div>

			<view class="line mt-20">
				<view v-if="allInfo.transfer_count !== 0" class="text">
					{{$t('途经')}}{{ allInfo.transfer_count || '' }}
				</view>
				<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
			</view>

			<div class="flex route-item">
				<flag class="mr-6" :country="get(allInfo, 'reach.area_info.country')" />
				<div style="text-align: center;">{{ get(allInfo, "reach.area_info.name") || '' }}</div>
			</div>

		</div>
		<div class="between mt-10">
			<div class="address ml-50">{{ get(allInfo, "departure.area_info.mergename") || '' }}</div>
			<div></div>
			<div class="address">{{ get(allInfo, "reach.area_info.mergename") || '' }}</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ["allInfo"],
	data() {
		return {
		}
	},
}
</script>

<style lang="less">
.boxSty {
	border-radius: 0 0 40rpx 40rpx;
	// border: 1rpx solid #06C36E;
	// background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
}

.address {
	width: 250rpx;
	font-size: 22rpx;
	color: #999;
}

.flag {
	width: 40rpx;
	height: 20rpx;
	background-color: #3c3;
	margin-right: 16rpx;
	flex-shrink: 0;
	margin-top: 10rpx;
}

.route-item {
	width: 276rpx;
	justify-content: center;
	font-size: 30rpx;
	font-weight: bold;
	color: #1d1d1d;

	.ico {
		flex-shrink: 0;
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
		margin-top: 10rpx;
	}
}

.line {
	// width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	// margin-top: -24rpx;
	.text {
		color: #278AFF;
		font-size: 26rpx;
		font-weight: 500;
		line-height: 28rpx;
		margin-top: -20rpx;
	}

	.ico {
		width: 114rpx;
	}
}
</style>